<template>
	<view class="content">
		<view class="header">
			<text class="title">商城</text>
		</view>
		<view class="search-box">
			<input type="text" placeholder="搜索商品" v-model="searchQuery" @input="handleSearch" />
		</view>
		
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="category-list">
			<view 
				class="category-item" 
				v-for="(item, index) in categoryList" 
				:key="index" 
				@tap="selectCategory(item.category)"
			>
				<image :src="item.icon" mode="aspectFit"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>

		<view class="product-list">
			<view class="product-item" v-for="(item, index) in filteredProducts" :key="index" @tap="goToDetail(item)">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-name">{{ item.name }}</text>
					<text class="product-price">¥{{ item.price }}</text>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="filteredProducts.length === 0">
			<text>暂无相关商品</text>
		</view>
	</view>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
	setup() {
		const products = ref([])
		const searchQuery = ref('')
		const currentCategory = ref('all')
		
		// 轮播图数据
		const bannerList = ref([
			{ image: '/static/tls.jpg' },
			{ image: '/static/cz.jpg' },
			{ image: '/static/amx.jpg' },
			{ image: '/static/jd.jpg' },
			{ image: '/static/iPhone16.jpg' },
			{ image: '/static/iPhone16pro.jpg' }
		])
		
		// 分类数据
		const categoryList = ref([
			{ name: '全部', icon: '/static/all.png', category: 'all' },
			{ name: '手机', icon: '/static/iPhone15.jpg', category: 'phone' },
			{ name: '牛奶', icon: '/static/tls.jpg', category: 'milk' },
			{ name: '服装', icon: '/static/nike1.jpg', category: 'clothing' },
			{ name: '食品', icon: '/static/wl.jpg', category: 'food' }
		])

		// 加载商品数据
		const loadProducts = () => {
			// 示例商品数据
			const sampleProducts = [
				{
					id: '1',
					name: '特仑苏',
					price: '45.78',
					image: '/static/tls.jpg',
					description: '特仑苏纯牛奶250mL*16',
					category: 'milk'
				},
				{
					id: '2',
					name: '安慕希',
					price: '38.90',
					image: '/static/amx.jpg',
					description: '安慕希原味酸奶',
					category: 'milk'
				},
				{
					id: '3',
					name: '纯甄',
					price: '33.45',
					image: '/static/cz.jpg',
					description: '蒙牛纯甄今典原味',
					category: 'milk'
				},
				{
					id: '4',
					name: '金典',
					price: '48.31',
					image: '/static/jd.jpg',
					description: '金典纯牛奶',
					category: 'milk'
				},
				{
					id: '5',
					name: '苹果15',
					price: '5399.00',
					image: '/static/iPhone15.jpg',
					description: 'Apple官配',
					category: 'phone'
				},
				{
					id: '6',
					name: '苹果16e',
					price: '4499.00',
					image: '/static/iPhone16e.jpg',
					description: 'Apple官配',
					category: 'phone'
				},
				{
					id: '7',
					name: '苹果16',
					price: '5099.00',
					image: '/static/iPhone16.jpg',
					description: 'Apple官配',
					category: 'phone'
				},
				{
					id: '8',
					name: '苹果16Pro',
					price: '6299.00',
					image: '/static/iPhone16pro.jpg',
					description: 'Apple官配',
					category: 'phone'
				},
				{
					id: '9',
					name: '耐克女子短T',
					price: '189.00',
					image: '/static/nike1.jpg',
					description: 'Nike官方',
					category: 'clothing'
				},
				{
					id: '10',
					name: '耐克女子纯棉短袖',
					price: '259.00',
					image: '/static/nike2.jpg',
					description: 'Nike官方',
					category: 'clothing'
				},
				{
					id: '11',
					name: '耐克三防衣',
					price: '429.00',
					image: '/static/nike3.jpg',
					description: 'Nike官方',
					category: 'clothing'
				},
				{
					id: '12',
					name: '卫龙',
					price: '16.00',
					image: '/static/wl.jpg',
					description: '卫龙辣条',
					category: 'food'
				},
				{
					id: '13',
					name: '猫耳朵',
					price: '6.00',
					image: '/static/mrd.jpg',
					description: '耳多多猫耳朵',
					category: 'food'
				}
			]

			// 保存到本地存储
			uni.setStorageSync('products', sampleProducts)
			products.value = sampleProducts
		}

		// 根据分类和搜索词筛选商品
		const filteredProducts = computed(() => {
			let result = products.value

			// 分类筛选
			if (currentCategory.value !== 'all') {
				result = result.filter(item => item.category === currentCategory.value)
			}

			// 搜索筛选
			if (searchQuery.value) {
				const query = searchQuery.value.toLowerCase()
				result = result.filter(item => 
					item.name.toLowerCase().includes(query) ||
					item.description.toLowerCase().includes(query)
				)
			}

			return result
		})

		// 选择分类
		const selectCategory = (category) => {
			currentCategory.value = category
		}

		// 搜索处理
		const handleSearch = () => {
			// 搜索逻辑已通过计算属性实现
		}

		// 跳转到商品详情
		const goToDetail = (item) => {
			uni.navigateTo({
				url: `/pages/shopDetail/shopDetail?id=${item.id}`
			})
		}

		onMounted(() => {
			loadProducts()
		})

		return {
			products,
			searchQuery,
			currentCategory,
			bannerList,
			categoryList,
			filteredProducts,
			selectCategory,
			handleSearch,
			goToDetail
		}
	}
}
</script>

<style scoped>
.content {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.search-box {
	padding: 20rpx 30rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-box input {
	height: 72rpx;
	background-color: #f5f5f5;
	border-radius: 36rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
}

.banner {
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.banner .swiper {
	height: 300rpx;
}

.banner image {
	width: 100%;
	height: 100%;
}

.category-list {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #fff;
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120rpx;
}

.category-item image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
}

.category-item text {
	font-size: 24rpx;
	color: #333;
}

.product-list {
	padding: 0 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.product-item {
	width: calc(50% - 15rpx);
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
}

.product-item:active {
	transform: scale(0.98);
}

.product-item image {
	width: 100%;
	height: 300rpx;
	transition: all 0.3s;
}

.product-item:active image {
	transform: scale(1.05);
}

.product-info {
	padding: 20rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
}

.product-price {
	font-size: 32rpx;
	color: #ff0000;
	font-weight: bold;
	display: flex;
	align-items: baseline;
}

.product-price::before {
	content: '¥';
	font-size: 24rpx;
	margin-right: 4rpx;
}

.empty-state {
	padding: 60rpx 0;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}

/* 添加商品卡片悬停效果 */
.product-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4rpx;
	background: linear-gradient(to right, #007AFF, #00BFFF);
	opacity: 0;
	transition: opacity 0.3s;
}

.product-item:active::after {
	opacity: 1;
}

/* 优化滚动条 */
::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

/* 添加分类菜单悬停效果 */
.category-item:hover {
	transform: scale(1.05);
}

/* 添加商品图片加载动画 */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.product-item image {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

.product-item image[src] {
	animation: none;
}
</style>